<template>
  
  
  <div class="hot-product-box">
    
    <goods-top-box>
      
      <template v-slot:left-one>{{ title }}</template>
    
    
    </goods-top-box>
    
    
    <div class="message-box">
      
      
      <ul class="message-group">
        
        
        <li v-for="item in hots" class="message-item">
          <a :href="item.sourceUrl">
            
            <img class="image-item" :src="item.imageUrl" alt="">
          
          
          </a>
          <p class="review-txt">{{ item.review }}</p>
          
          <p class="author">{{ item.author }}</p>
          
          <div class="name-price-item">
            
            <span class="item-name">{{ item.name }}</span>
            
            <span class="segmentation">|</span>
            
            <span class="item-price">{{ item.price }}</span>
          
          </div>
        
        </li>
      
      
      </ul>
    
    
    </div>
  
  
  </div>


</template>

<script>
import GoodsTopBox from "@/components/Mi/Common/GoodsTopBox";

export default {
  name: "HotProduct",
  components: {
    GoodsTopBox,
  },
  data() {
    return {
      title: '',
      hots: [],
    }
  },
  created() {
    this.getHotProduct()
  },
  methods: {
    async getHotProduct() {
      const {data: res} = await this.$http.get('hotproduct')
      console.log(res)
      this.title = res.title
      console.log(this.title)
      this.hots = res.hots
    },
  },
}
</script>

<style scoped lang="less">

.hot-product-box {
  
  
  .message-box {
    
    
    .message-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .message-item {
        height: 415px;
        width: 296px;
        transition: all .3s linear;
        
        &:hover{
          transform: translateY(-1px);
          box-shadow: 5px 5px 20px #ccc;
        }
        
        .image-item {
          width: 296px;
          height: 220px;
          
          
        }
        
        .review-txt {
          width: 240px;
          height: 72px;
          color: rgb(51, 51, 51);
          font-size: 14px;
          margin: 22px 28px;
          
        }
        
        .author {
          color: #b0b0b0;
          font-size: 12px;
          margin: 0 28px 8px 28px;
          
        }
        
        .name-price-item {
          margin-left: 28px;
          
          .item-name {
            font-size: 14px;
            color: #333333;
            
          }
          
          .segmentation {
            margin: 0 5px;
            color: #e0e0e0;
            
            
          }
          
          .item-price {
            font-size: 14px;
            color: #ff6700;
            
            
          }
        }
        
      }
    }
  }
}

</style>
